<template>
	<view>
		<swiper autoplay vertical class="swiper" :style="`max-height:${ +props.size + 2 }px;`">
			<swiper-item class="swiper-item" v-for="(item,index) in props.list" :key="index">
				<text :style="`font-size:${props.size};color:${props.color};`" class="text">{{item[props.field]}}</text>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	const props = defineProps({
		size: {
			default: '14px',
			type: String
		},
		list: {
			default: [],
			type: Array
		},
		field: {
			default: 'title',
			type: String
		},
		color: {
			default: '#000',
			type: String
		}
	})
</script>

<style>
	.swiper {
		display: flex;
		align-items: center;
	}

	.swiper-item {
		display: flex;
		align-items: center;
	}
	.text{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>